<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Splan</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">上传你的计划</h1>
		</header>
		<div id="app-submit">
			<div class="mui-content" style="padding-top : 60px;">
				<form class="mui-input-group" style="margin-left:10px;margin-right: 10px">
					<div class="mui-input-row">
						<label>姓名</label>
						<input v-model="username" type="text" placeholder="...">
					</div>
				</form>
				<div class="mui-content-padded">
					<div class="mui-input-row">
						<textarea v-model="plan" rows="5" placeholder="your plan"></textarea>
					</div>
					<div class="mui-button-row">
						<button type="button" class="mui-btn mui-btn-primary" @click="submit">提交</button>&nbsp;&nbsp;
						<button type="button" class="mui-btn mui-btn-danger" @click="goOff()">取消</button>
					</div>
				</div>
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" href="../index.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="input.html">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">上传计划</span>
			</a>
		</nav>
		<script src="../js/vue.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script>
			(function($) {
				$(".mui-scroll-wrapper").scroll({
					bounce: false, //滚动条是否有弹力默认是true
					indicators: true, //是否显示滚动条,默认是true
				});
			})(mui);
			//解决 所有a标签 导航不能跳转页面 
			mui('body').on('tap', 'a', function() {
				document.location.href = this.href;
			});
			var aData = new Date();
			var vm = new Vue({
				el: "#app-submit",
				data: {
					username: "",
					plan: "",
					date: aData.getFullYear() + "-" + (aData.getMonth() + 1) + "-" + aData.getDate() + " " + aData.getHours() + ":" + aData.getMinutes() + ":" + aData.getSeconds()
				},
				methods: {
					goOff(){
						history.back();
					},
					submit() {
						if(this.username == undefined || this.username.length <= 0) {
							  mui.toast('用户名为空！');
							  return;
						}
						if(this.plan == undefined || this.plan.length <= 0) {
							  mui.toast('计划为空！');
							  return;
						}
						axios
							.post('http://18.18.18.18:8080/submit', {
								'date' : this.date,
								'username': this.username,
								'plan' : this.plan
							}, {
								headers: {
									"Access-Control-Allow-Origin": "*" //允许跨域
								}
							})
							.then(
								mui.toast('提交成功！'),
								this.username = "", //提交后清空输入栏
								this.plan = ""
							)
							.catch(function(error) { // 请求失败处理
								console.log(error);
							});
					}
				}
			});
		</script>
	</body>
</html>
